<template>
  <div class="city_list">
    <city-item
    v-for="item of cityInfo"
    :key="item.id"
    :cityId="item.cityId"
    :cityName="item.cityName"
    ></city-item>
  </div>
</template>

<script>
import CityItem from './Sub.vue'
import cityData from '@/assets/data/cities.js'

export default {
  name: 'CityList',
  data() {
    return {
      cityInfo: cityData
    }
  },
  components: {
    CityItem
  }
}
</script>

<style lang="scss" scoped>
.city_list {
  margin-top: .02rem;
}
</style>